<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .nianli{
            border: 2px solid red;
            display: grid;
            grid-template-columns: repeat(6, auto);
            gap: 10px;
            padding: 10px;
        }
        .title{
            color: red;
            text-align: center;
            line-height: 2;
        }
        .yueli{
            border: 1px solid blue;
            padding: 5px;
        }
        .data{
            display: grid;
            grid-template-columns: repeat(7, auto);
        }
        .data>div{

            text-align: center;
        }
        .yue{
            color:red;
            font-weight: bold;
            text-align: center;
            line-height: 2;
        }
        select{
            padding: 6px;
            width: 160px;
        }
    </style>
    <title>年历</title>
</head>
<body>
<div class='kuang'>
    <select onchange="nav(value)">
        <option value="2025">2025</option>
        <option value="2024">2024</option>
        <option value="2023">2023</option>
        <option value="2022">2022</option>
        <?php
        $d=new DateTime();
        $currentYear=$d->format('Y'); //当前年份
        $year=$_GET['year']??$currentYear;//获取要查看年历的年份
        for($i=$currentYear;$i>$currentYear-10;$i--){
            echo "        <option ",$i==$year?"selected ":"","value='",$i,"'>",$i,"</option>\n";
        }
        ?>
    </select>
    <div class="title">2025年</div>
    <div class='nianli'>
        <div class='yueli'>
            <div class='yue'>1月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>2月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>3月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>4月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>5月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>6月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>7月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>8月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>9月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>10月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>11月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>12月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
    </div>
</div>
<script>
    function nav(value){
        console.log(value) //下拉列表框当前选项的值value
        console.log(location.href) //当前正在访问的页面的网址
        location.href='?year='+value //修改当前页面的网址
    }
</script>
</body>
</html>
